<template>
        <div class="cate_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-present"></i>
            </el-col>
            <el-col :span="3">
                <h1>商品分类</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="goodsCateList"
                    row-key="cat_id"
                    :border="true"
                    align="center"
                    class="goodsCateTable"
                    height="42vh"
                    :tree-props="{children: 'children'}"
                    v-loading="getgoodsCateListLoading"
                    element-loading-text="加载中,请稍等..."
                >
                    <el-table-column
                        type="index"
                        width="50"
                    >
                        <template slot="header">
                            <el-tooltip content="添加分类" placement="top-end">
                                <el-button
                                    type="success"
                                    size="mini"
                                    icon="el-icon-plus"
                                    circle
                                    @click="openGoodsCateDialog"
                                >
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="分类名称"
                        min-width="298"
                    >
                    <template v-slot="catedata" >
                        {{catedata.row.cat_name}}              
                    </template>
                    </el-table-column>
                    <el-table-column
                        label="是否有效"
                        min-width="76"
                    >
                        <template v-slot="catedata">
                            <span v-if="catedata.row.cat_deleted">
                                <i class="el-icon-success" style="color:#ffce44"></i>
                            </span>
                            <span v-else>
                                <i class="el-icon-error" style="color:#dd5246"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="级别"
                        min-width="70"
                    >
                        <template v-slot="catedata">
                            <el-tag
                                :type="catedata.row.cat_level | cateLevelLabel(false)"
                                size="small"
                                effect="dark"
                                disable-transitions
                            >
                                {{catedata.row.cat_level | cateLevelLabel(true)}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="136"
                    >
                    <template v-slot="catedata">
                        <el-button-group>
                            <el-tooltip content="编辑信息" placement="top-end">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="openEditCateDialog(catedata.row.cat_id)"
                                >
                                </el-button>
                                </el-tooltip>
                            <el-tooltip content="删除分类" placement="top-start">
                                    <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="askdeleteGoodsCate(catedata.row.cat_id,catedata.row.cat_name,catedata.row.cat_level)"
                                >
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" style="margin-bottom: 15px">
                <hr/>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="showPagination"
                    :current-page="nowpage"
                    :page-sizes="[5,7,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="goodscatenum">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog 
            title="新增商品分类"
            :visible.sync="dialogNewCateVisible"
            width="32%"
            center
            @close="resetCloseNewCateDialog"
        >
            <el-form
                :model="addGoodsCateForm"
                :rules="addGoodsCateFormRules"
                ref="addGoodsCateRef"
                status-icon 
                label-width="136px"
            >
                <el-form-item label="商品分类名称" prop="newGoodsCateLastName">
                    <el-input
                        placeholder="请输入新分类名称"
                        v-model="addGoodsCateForm.newGoodsCateLastName"
                        maxlength="10"
                        show-word-limit
                        clearable
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="该新分类的父级分类">
                    <el-row>
                        <el-col :span="24">
                            <el-cascader
                                clearable
                                v-model="newGoodsCateFirstName"
                                :options="goodsFatherCateList"
                                :props="cascaderProps"
                                @change="changeCateLevel"
                            >
                            </el-cascader>
                        </el-col>
                        <el-col :span="4" :offset="1" class="newFormButton">
                        <el-button
                            type="primary"
                            size="small"
                            @click="pushNewGoodsCate"
                        >
                        提 交
                        </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog 
            title="编辑商品分类名称"
            :visible.sync="dialogEditCateVisible"
            width="32%"
            center
            @close="resetCloseEditCateDialog"
        >
            <el-form
                :model="editGoodsCateForm"
                :rules="editGoodsCateFormRules"
                ref="editGoodsCateRef"
                status-icon 
                label-width="136px"
                label-position="top"
            >
                <el-form-item>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-shopping-bag-1"></i>
                                    当前商品分类名称
                            </template>
                            {{editNowGoodsCateName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-wind-power"></i>
                                    当前商品分类级别
                            </template>
                            <el-tag
                                :type="editNowGoodsCateLevel | cateLevelLabel(false)"
                                size="small"
                                effect="light"
                                disable-transitions
                            >
                                {{editNowGoodsCateLevel | cateLevelLabel(true)}}
                            </el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <el-form-item label="商品分类新名称" prop="editAfterGoodsCateName">
                    <el-row>
                        <el-col :span="18">
                            <el-input
                                v-model="editGoodsCateForm.editAfterGoodsCateName"
                                placeholder="请输入商品分类新名称"
                                clearable
                                maxlength="10"
                                show-word-limit
                                @keyup.native.enter="pushEditGoodsCate"
                            >
                            </el-input>
                        </el-col>
                        <el-col :span="1" :offset="2">
                            <el-button
                                type="primary"
                                size="small"
                                @click="pushEditGoodsCate"
                            >
                            提 交
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-dialog>

        </div>
</template>

<script>
export default({
    name:'goodsCate',
    data(){
        return {
            goodsCateList:[],
            type: 3,
            nowpage: 1,
            pagesize: 5,
            goodscatenum: 0,
            showPagination: true,
            getgoodsCateListLoading: true,
            dialogNewCateVisible: false,
            newGoodsCateFirstName:[],
            addGoodsCateForm:{
                newGoodsCateLastName:'',
                newGoodsCatePID:0,
                newGoodsCateLevel:0
            },
            addGoodsCateFormRules:{
                newGoodsCateLastName:[
                        {
                            required: true,
                            message: '商品分类名称不能为空！',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '商品分类名称过长！',
                            trigger: 'blur'
                        }
                ]
            },
            goodsFatherCateList:[],
            cascaderProps:{
                value: 'cat_id',
                label:'cat_name',
                children: 'children',
                expandTrigger:'hover',
                checkStrictly: true
            },
            dialogEditCateVisible:false,
            editNowGoodsCateID:0,
            editNowGoodsCateName:'',
            editNowGoodsCateLevel:'',
            editGoodsCateForm:{
                editAfterGoodsCateName:'',
            },
            editGoodsCateFormRules:{
                editAfterGoodsCateName:[
                    {
                        required: true,
                        message: '商品分类新名称不能为空！',
                        trigger: 'blur'
                    },
                    {
                        max: 10,
                        message: '商品分类新名称过长！',
                        trigger: 'blur'
                    }
                ]
            }


        }
    },
    created(){
      this.getgoodsCateList()
    },
    methods: {
        async getgoodsCateList(){
            const { data: res } = await this.$http.get('categories',{
                    params:{
                        type: this.type,
                        pagenum: this.nowpage,
                        pagesize: this.pagesize,
                    }
            });
            if(res.meta.status == 200){
                this.goodsCateList = res.data.result;
                this.goodscatenum = res.data.total;
                if(this.goodsCateList != null){
                    this.getgoodsCateListLoading = false;
                }
            }else{
                this.getgoodsCateListLoading = false;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品分类列表失败！'
                    }
                )
            }
        },
        checkPagination(){
            if(this.goodscatenum>=this.pagesize){
                this.showPagination =false;
            }else{
                this.showPagination =true;
            }
        },
        handleSizeChange(value){
            this.pagesize = value;
            this.getgoodsCateList();
            this.checkPagination();
        },
        handleCurrentChange(value){
            this.nowpage = value;
            this.getgoodsCateList();
            this.checkPagination();
        },
        openGoodsCateDialog(){
            this.getFatherCateList();
            this.dialogNewCateVisible = !this.dialogNewCateVisible;
        },
        async getFatherCateList(){
                const { data: res } = await this.$http.get('categories',{params:{type: 2}});
                if(res.meta.status == 200){
                    this.goodsFatherCateList =res.data
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'error',
                            duration:2000,
                            message: '获取商品父类失败！'
                        }
                    )
                }
        },
        resetCloseNewCateDialog(){
            this.dialogNewCateVisible = false
            this.$refs.addGoodsCateRef.resetFields();
            this.newGoodsCateFirstName = [],
            this.addGoodsCateForm.newGoodsCateLastName = '',
            this.addGoodsCateForm.newGoodsCatePID = 0,
            this.addGoodsCateForm.newGoodsCateLevel = 0
        },
        changeCateLevel(){
            if(this.newGoodsCateFirstName.length >0){
                this.addGoodsCateForm.newGoodsCatePID = this.newGoodsCateFirstName[this.newGoodsCateFirstName.length-1];
                this.addGoodsCateForm.newGoodsCateLevel = this.newGoodsCateFirstName.length;
            }else{
                this.addGoodsCateForm.newGoodsCatePID = 0;
                this.addGoodsCateForm.newGoodsCateLevel = 0;
            }
        },
        pushNewGoodsCate(){
            this.$refs.addGoodsCateRef.validate(async valid =>{
                if(valid){
                    const { data: res } = await this.$http.post('categories',
                        {
                            cat_pid: this.addGoodsCateForm.newGoodsCatePID,
                            cat_name: this.addGoodsCateForm.newGoodsCateLastName,
                            cat_level: this.addGoodsCateForm.newGoodsCateLevel
                        }
                    );
                    this.getgoodsCateList()
                    this.resetCloseNewCateDialog();
                    if(res.meta.status == 201){
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '添加新商品分类成功！'
                            }
                        )
                    }else{
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'error',
                                duration:2000,
                                message: res.meta.msg
                            }
                        )
                    }
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写商品分类信息！'
                        }
                    )
                }
            })
        },
        async openEditCateDialog(value){
            const { data: res } = await this.$http.get(`categories/${value}`);
            this.editNowGoodsCateID = value
            this.editNowGoodsCateName = res.data.cat_name;
            this.editNowGoodsCateLevel = res.data.cat_level;
            this.dialogEditCateVisible = true
        },
        resetCloseEditCateDialog(){
            this.$refs.editGoodsCateRef.resetFields();
        },
        async pushEditGoodsCate(){
            this.$refs.editGoodsCateRef.validate(async valid =>{
                if(valid){
                    const { data: res } = await this.$http.put(`categories/${this.editNowGoodsCateID}`,
                    {
                        cat_name:this.editGoodsCateForm.editAfterGoodsCateName
                    })
                    if(res.meta.status == 200){
                        this.dialogEditCateVisible = false;
                        this.getgoodsCateList();
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '编辑商品分类名称成功！'
                            }
                        )
                    }else{
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'error',
                                duration:2000,
                                message: res.meta.msg
                            }
                        )
                    }
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写商品分类新名称！'
                        }
                    )
                }
            })
        },
        askdeleteGoodsCate(value1,value2,value3){
            var deleteGoodsLevel = '';
            switch(value3){
                case 0 :{
                    deleteGoodsLevel = "一级"
                }
                break;
                case 1 :{
                    deleteGoodsLevel = "二级"
                }
                break;
                case 2 :{
                    deleteGoodsLevel = "三级"
                }
                break;
            };
            if(value3<2){
                this.$confirm('<span style="color:red;font-weight:bold">注：删除'+deleteGoodsLevel+'分类将同时删除该分类下的所有子分类</span>'+'<br/>'+'请确认是否删除<br/>'+value2+' '+deleteGoodsLevel+'商品分类','删除'+deleteGoodsLevel+'商品分类提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '返回',
                    type: 'warning',
                    dangerouslyUseHTMLString: true
                }).then(() => {
                    this.deleteGoodsCate(value1,value2);
                this.$message({
                    center:true,
                    showClose: true,
                    type: 'success',
                    duration:2000,
                    message: '开始执行删除 '+value2+' 商品分类'
                });
                }).catch(() => {
                    this.$message({
                        center:true,
                        showClose: true,
                        duration:2000,
                        message: '取消删除 '+value2+' 商品分类'
                    })
                });
            }else{
                this.$confirm('<span style="color:red;font-weight:bold">注：删除操作不可逆！</span>'+'<br/>'+'请确认是否删除<br/>'+value2+' '+deleteGoodsLevel+'商品分类','删除'+deleteGoodsLevel+'商品分类提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '返回',
                    type: 'warning',
                    dangerouslyUseHTMLString: true
                }).then(() => {
                    this.deleteGoodsCate(value1,value2);
                this.$message({
                    center:true,
                    showClose: true,
                    type: 'success',
                    duration:2000,
                    message: '开始执行删除 '+value2+' 商品分类'
                });
                }).catch(() => {
                    this.$message({
                        center:true,
                        showClose: true,
                        duration:2000,
                        message: '取消删除 '+value2+' 商品分类'
                    })
                });
            }
        },
        async deleteGoodsCate(value1,value2){
            const { data: res } = await this.$http.delete(`categories/${value1}`);
            if(res.meta.status == 200){
                if(this.goodsCateList.length == 1){
                    this.nowpage = this.nowpage-1
                };
                this.getgoodsCateList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '删除 '+value2+' 商品分类成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '删除 '+value2+' 商品分类失败！'
                    }
                )
            }
        }
    },
    filters:{
        cateLevelLabel(value,flag){
            if(flag){
                switch(value){
                    case 0:
                        return '一级'
                    break;
                    case 1:
                        return '二级'
                    break;
                    case 2:
                        return '三级'
                    break;
                }
            }else{
                switch(value){
                    case 0:
                        return 'danger'
                    break;
                    case 1:
                        return 'success'
                    break;
                    case 2:
                        return 'info'
                    break;
                }
            }
        }
    }

})
</script>

<style lang="less">
    .cate_container{
        width: 80vw;
        text-align: center;
        background-color: #fff;
        padding: 30px 8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .goodsCateTable{
            width: 100%;
            margin: 20px 0 20px 0;
        }
        .el-descriptions-row th{
            width: 150px;
        }
        .newFormButton{
            text-align: right;
            margin:0;
        }
    }
</style>